import ContentBox from "../../component/ContentBox";
import "./style.css";
import AlertComponet from "../../component/Alert";
import { getDemonstrationList, getCompanyAdoptList, townList } from "../../api";
import { useEffect } from "react";
import { useState } from "react";
import { diva } from "../../global";
import Layout from "../../component/Layout";
import SwitchTab from "../../component/SwitchTab";
// 18580880040
import huatian from "../../component/idJson";

const CompanyManage = () => {
  const [demonstration, setDemonstration] = useState([]);
  const [middleBoxVisible, setMiddleBoxVisible] = useState(false);
  const [companyAdopt, setCompanyAdopt] = useState([]);
  const [town, setTown] = useState([]);
  const [nameChange, setNameChange] = useState("");
  const [canshu, setCanshu] = useState({ t_id: null, is_last: null });
  const [picIndex, setPicIndex] = useState(-1);
  const [CompannyIndex, setCompanyIndex] = useState("");
  const [companyAdoptInfo, setCompanyAdoptInfo] = useState({});
  const [videoIndex, setVideoIndex] = useState(-1);
  const getData = () => {
    getDemonstrationList()
      .then((res) => {
        setDemonstration(res.data.list);
      })
      .catch((err) => {
        console.log(err);
      });
    getCompanyAdoptList()
      .then((res) => {
        setCompanyAdopt(res.data.list);
        if (res.data.list.length > 0) {
          setCompanyAdoptInfo(res.data.list[0]);
        }
      })
      .catch((err) => {
        console.log(err);
      });
    townList()
      .then((res) => {
        setTown(res.data.list);
      })
      .catch((err) => console.log(err));
  };
  const getListInfo = (val) => {
    setCanshu({ ...canshu, is_last: val === 1 ? 1 : null });

    getCompanyAdoptList({ ...canshu, is_last: val === 1 ? 1 : null })
      .then((res) => {
        setCompanyAdopt(res.data.list);
        if (res.data.list.length > 0) {
          setCompanyAdoptInfo(res.data.list[0]);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };

  const getGroupid = () => {
    diva.client
      ?.request("GetEntityIds", {
        group: "企业总览/涂市镇点位", // 资源列表中从根目录开始的路径
      })
      .then(async (res) => {
        const modal = await diva.client?.getEntityById(res.result[0]);
        const modal2 = await diva.client?.getEntityById(res.result[1]);
        const listener = (event) => {
          setMiddleBoxVisible(true);
          setNameChange("涂市镇");
          diva.client?.request("StopCameraTrack");

          diva.client
            ?.applyScene("涂市总企业")
            .then(() => {})
            .catch((err) => console.log(err));
        };
        modal?.addEventListener("click", listener);
        modal2?.addEventListener("click", listener);
      })
      .catch((err) => console.log(err));
    diva.client
      ?.request("GetEntityIds", {
        group: "企业总览/李溪镇点位", // 资源列表中从根目录开始的路径
      })
      .then(async (res) => {
        const modal = await diva.client?.getEntityById(res.result[0]);
        const modal2 = await diva.client?.getEntityById(res.result[1]);
        const listener = (event) => {
          setMiddleBoxVisible(true);
          setNameChange("李溪镇");
          diva.client?.request("StopCameraTrack");

          diva.client
            ?.applyScene("李溪总企业")
            .then(() => {})
            .catch((err) => console.log(err));
        };
        modal?.addEventListener("click", listener);
        modal2?.addEventListener("click", listener);
        return () => {
          modal?.removeEventListener("click", listener);
          modal2?.removeEventListener("click", listener);
        };
      })
      .catch((err) => console.log(err));
    diva.client
      ?.request("GetEntityIds", {
        group: "企业总览/铜鼓镇点位", // 资源列表中从根目录开始的路径
      })
      .then(async (res) => {
        const modal = await diva.client?.getEntityById(res.result[0]);
        const modal2 = await diva.client?.getEntityById(res.result[1]);
        const listener = (event) => {
          setNameChange("铜鼓镇");
          setMiddleBoxVisible(true);
          diva.client?.request("StopCameraTrack");

          diva.client
            ?.applyScene("铜鼓总企业")
            .then(() => {})
            .catch((err) => console.log(err));
        };
        modal?.addEventListener("click", listener);
        modal2?.addEventListener("click", listener);
      })
      .catch((err) => console.log(err));
    diva.client
      ?.request("GetEntityIds", {
        group: "企业总览/花田乡点位", // 资源列表中从根目录开始的路径
      })
      .then(async (res) => {
        const modal = await diva.client?.getEntityById(res.result[0]);
        const modal2 = await diva.client?.getEntityById(res.result[1]);
        const listener = (event) => {
          setNameChange("花田乡");
          setMiddleBoxVisible(true);
          diva.client?.request("StopCameraTrack");

          diva.client
            ?.applyScene("花田总企业")
            .then(() => {})
            .catch((err) => console.log(err));
        };
        modal?.addEventListener("click", listener);
        modal2?.addEventListener("click", listener);
      })
      .catch((err) => console.log(err));
    diva.client
      ?.request("GetEntityIds", {
        group: "企业总览/南腰界镇点位", // 资源列表中从根目录开始的路径
      })
      .then(async (res) => {
        const modal = await diva.client?.getEntityById(res.result[0]);
        const modal2 = await diva.client?.getEntityById(res.result[1]);
        const listener = (event) => {
          setNameChange("南腰界镇");
          setMiddleBoxVisible(true);
          diva.client?.request("StopCameraTrack");

          diva.client
            ?.applyScene("南腰界总企业")
            .then(() => {})
            .catch((err) => console.log(err));
        };
        modal?.addEventListener("click", listener);
        modal2?.addEventListener("click", listener);
      })
      .catch((err) => console.log(err));
  };
  const getChildrenValue = (val, name) => {
    setCompanyAdoptInfo(companyAdopt[val]);
    // setMiddleId()
  };
  const getVideoIndex = (index) => {
    setVideoIndex(index);
    setMiddleBoxVisible(false)
  };
  const getMiddleId = (val, name) => {
    console.log(val, "this is");
    setVideoIndex(-1);
    setNameChange(name);
    // setVideoIndex(
    //   !name
    //     ? -1
    //     : name === "涂市镇"
    //     ? 0
    //     : name === "铜鼓镇"
    //     ? 1
    //     : name === "李溪镇"
    //     ? 2
    //     : 3
    // );

    if (val === 0 || name === undefined) {
      setMiddleBoxVisible(false);
    } else {
      diva.client?.request("StopCameraTrack");

      diva.client
        ?.applyScene(`${name.substring(0, name.length - 1)}总企业`)
        .then(() => {
          name === "花田乡"
            ? huatian.huatianCom.map((item) => {
                changeDikuai(item.id, item.name,item.district_id,item.townId);
              })
            : name === "涂市镇"
            ? huatian.tushiCom.map((item) => {
                changeDikuai(item.id, item.name,item.district_id,item.townId);
              })
            : name === "南腰界镇"
            ? huatian.nanyaoCom.map((item) => {
                changeDikuai(item.id, item.name,item.district_id,item.townId);
              })
            : name === "铜鼓镇"
            ? huatian.tongguCom.map((item) => {
                changeDikuai(item.id, item.name,item.district_id,item.townId);
              })
            : name === "李溪镇"
            ? huatian.lixiCom.map((item) => {
                changeDikuai(item.id, item.name,item.district_id,item.townId);
              })
            : console.log(1);
        })
        .catch((err) => console.log(err));
    }

    setCanshu({ ...canshu, t_id: val === 5 ? null : val ? val : null });
    getCompanyAdoptList({
      ...canshu,
      t_id: val === 5 ? null : val ? val : null,
    })
      .then((res) => {
        setCompanyAdopt(res.data.list);
        if (res.data.list.length > 0) {
          setCompanyAdoptInfo(res.data.list[0]);
        }
      })
      .catch((err) => {
        console.log(err);
      });
    // setMiddleId()
  };
  const changeDikuai = async (id, name,district_id,townId) => {
    const modal = await diva.client?.getEntityById(id);
    const listener = (event) => {
      diva.client
        ?.applyScene(name)
        .then(() => {})
        .catch((err) => console.log(err));
        getCompanyAdoptList({t_id:townId,district_id:district_id})
        .then((res) => {
          setCompanyAdopt(res.data.list);
          if (res.data.list.length > 0) {
            setCompanyAdoptInfo(res.data.list[0]);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    };
    modal?.addEventListener("click", listener);
    return () => {
      modal.setWebWidget(null);
    };
  };
  const titleChangeName = (val) => {
    console.log(val);
  };
  const chilrenIndex = () => {};
  useEffect(() => {
    getData();
    getGroupid();
  }, []);
  return (
    <div>
      <SwitchTab
        nameChange={nameChange}
        index={3}
        layout={middleBoxVisible}
        title={town}
        setParentProps={getMiddleId}
      />

      {/* <Layout index={3}showIndex={chilrenIndex}/> */}

      <div className="overview-container">
        <AlertComponet />
        <div className="content-left">
          <ContentBox
            title={"酉阳主要示范区"}
            conpantyIndex={videoIndex}
            width={"472px"}
            companyExample={demonstration}
            getVideoIndex={getVideoIndex}
            // companySinglePic={}
          />
          {videoIndex === -1 && (
            <div className="news-ppart">
              <ContentBox
                mutiple={true}
                width={"472px"}
                news={true}
                title={"合作单位"}
              />
            </div>
          )}
        </div>
        {videoIndex === -1 && (
          <div className="content-right">
            <ContentBox
              title={"企业认养信息"}
              companyIndex={getChildrenValue}
              width={"472px"}
              companyDetail={companyAdoptInfo}
              SmallSwitchTab={true}
              company={companyAdoptInfo}
              companyShow={getListInfo}
              verticalInfo={[
                {
                  title: "认养面积",
                  count: companyAdoptInfo?.secondColumn,
                  symbol: companyAdoptInfo?.symbol,
                },
                { title: "所在种植区", count: companyAdoptInfo?.town_info },
                {
                  title: "交付时间",
                  count: companyAdoptInfo?.fourthColumn,
                },
                { title: "生产联系人", count: companyAdoptInfo?.contact },
              ]}
              tableListName={["企业名称", "认养面积", "认养周期", "交付时间"]}
              tableList={companyAdopt}
              companyyIndex={CompannyIndex}
            />
          </div>
        )}
      </div>
    </div>
  );
};
export default CompanyManage;
